<template>
	<view class="main">
		<view class="date-top-bg">
			<view class="date-title">选择参观日期</view>
			<view class="date-bg">
				<view class="week-bg">
					<view class="week-item">一</view>
					<view class="week-item">二</view>
					<view class="week-item">三</view>
					<view class="week-item">四</view>
					<view class="week-item">五</view>
					<view class="week-item">六</view>
					<view class="week-item">七</view>
				</view>
				<view class="day-bg">
					<view class="day-item" v-for="(item, index) in datalist" :key="index" @click="selectDate(item)">
						<view class="day-item-box" :class="{'day-background-border':item.day.status == 0,'background-selected':(item.data.length != 0 && date.data.date == item.data.date)}">
							<template v-if="item.day.status == 4">
								<view class="day-item-text-red">{{item.day.day}}</view>
								<view class="day-item-sub-red" >{{item.day.text}}</view>
							</template>
							<template v-else-if="item.day.status == 0">
								<view class="day-item-text-black" :class="{'whitefont':(item.data.length != 0 && date.data.date == item.data.date)}">{{item.day.day}}</view>
								<view class="day-item-sub" :class="{'whitefont':(item.data.length != 0 && date.data.date == item.data.date)}">{{item.day.text}}</view>
							</template>
							<template v-else-if="item.day.status == 1">
								<view class="day-item-text-gray">{{item.day.day}}</view>
								<view class="day-item-sub-red" >{{item.day.text}}</view>
							</template>
							<template v-else>
								<view class="day-item-text-gray">{{item.day.day}}</view>
								<view class="day-item-sub" >{{item.day.text}}</view>
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--date-top-bg end-->
		<view class="time-bottom-bg">
			<view class="date-title">选择时间段</view>
			<view class="time-bg">
				<block v-for="(item, index) in curtimes" :key="index">
					<template v-if="item.status == 0">
						<view vi class="time-item" @click="selectTime(item)" :class="{'background-selected':(time.id == item.id)}">{{item.start}}-{{item.end}}</view>
					</template>
					<template v-else-if="item.status == 1"> 
						<view class="time-item background-none">{{item.start}}-{{item.end}}(已满）</view>
					</template>
					<template v-else> 
						<view class="time-item background-none">{{item.start}}-{{item.end}}</view>
					</template>
				</block>
				<!-- <view class="time-item" @click="selectTime(item)" v-for="(item, index) in curtimes" :key="index" :class="{'background-selected':(time.id == item.id)}">{{item.start}}-{{item.end}}</view> -->
				
			</view>
		</view>
		<view class="bottom-btn" @click="confirm">确定选择</view>
		
	</view>
</template>

<script>
	import {
		peformDatelist
	} from "@/api/2_activity";
	export default {
		data() {
			return {
				id: '',
				datalist:[],
				curtimes:[],
				date:'',
				time:''
			}
		},
		methods: {
			confirm(){
				if(this.date == '' || this.date == undefined){
					uni.showToast({
						title: '请选择预约日期',
						icon: 'none'
					});
					return;
				}
				if(this.time == '' || this.time == undefined){
					uni.showToast({
						title: '请选择预约时段',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: `/pages/2_development/scenic/writeinfo?date_str=`+this.date.day.date+"&time_id="+this.time.id+"&date="+this.date.day.fdate+" "+this.time.start+"-"+this.time.end+"&perform_id="+this.id+"&price="+this.time.price
				})
			},
			selectDate(e){
				if(e.data.status == 0){
					this.date = e;
					this.curtimes = this.date.data.times;
					this.time = '';
					console.info(this.date.day.date);
				}
				console.info(e);
			},
			selectTime(e){
				console.info(e);
				if(this.time != '' && this.time.id == e.id){
					this.time = '';
				}else{
					this.time = e;
				}
			}
		},
		onLoad(options) { 
			this.id = options.id
			console.info(this.date.id);
			peformDatelist(this.id).then(res => {
				console.info(res.data.arlist);
				this.datalist = res.data.arlist;
				this.curtimes = res.data.curtimes;
			})
		}
	}
</script>

<style>
	.main {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.date-top-bg {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: white;
		padding-bottom: 20rpx;
		margin-top: 30rpx;
	}

	.date-title {
		font-size: 28rpx;
		color: #000000;
		text-align: center;
		margin-top: 20rpx;
	}

	.date-bg {
		padding: 10rpx 20rpx 0rpx 20rpx;
	}

	.week-bg {
		display: flex;
		flex-direction: row;
		margin-top: 9px;
		padding: 0 1%;
		box-sizing: border-box;
	}

	.week-item {
		flex: 1;
		text-align: center;
		width: 14%;
	}

	.week-item:first-child {
		margin-left: 1%;
	}

	.day-bg {
		display: flex;
		flex-direction: row;
		margin-top: 14px;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.day-item {
		width: 14%;
		padding: 2rpx;
		box-sizing: border-box;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.day-item-box {
		/* background-color: #CCCCCC; */
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center; 
		align-items: center;
		height: 80rpx;
		flex:1;
	}
	.day-background-border{
		border: 1px solid #F0F0F0;
	}
	.background-selected{
		background-color: #0193ff;
		color:#FFFFFF;
	} 
	
	.background-none{
		background-color: #CCCCCC;
		color:#A1A1A1;
	}
	
	.day-item:nth-child(7n+1) {
		margin-left: 1%;
	}

	.day-item-text-gray {
		font-size: 24rpx;
		color: #AAAAAA;
	}
	.day-item-text-black {
		font-size: 24rpx;
		color: #000000;
	}
	.day-item-text-red {
		font-size: 24rpx;
		color: #FF3700;
	}
	.day-item-sub {
		font-size: 20rpx;
		color: #18BC37;
	}
	.day-item-sub-red {
		font-size: 20rpx;
		color: #FF3700;
	}
	.whitefont{
		color:#FFFFFF;
	}
	.time-bottom-bg {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: white;
		margin-top: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 40rpx;
	}

	.time-bg {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 10rpx 40rpx;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.time-item {
		border: 1px solid #C8C7CC;
		height: 60rpx;
		width: 45%;
		text-align: center;
		line-height: 60rpx;
		margin: 10rpx 0rpx;
		border-radius: 30rpx;
	}

	.bottom-btn {
		margin-top: 30rpx;
		background-color: #0193ff;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #FFFFFF;
		width: 90%;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 40rpx;
	}
	
</style>
